<template>
  <el-container>
    <el-aside width="150px">
      <div>风险等级</div>
      <div>累计位移<br /><b>(mm)</b></div>
      <div>位移速率<br /><b>(mm·d^-1)</b></div>
    </el-aside>
    <el-main>
      <div class="fatherBox">
        <div class="box">
          <p>一级</p>
          <div>
            <div>
              P
              <input type="text" v-model="oneTotalPlane" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="oneSpeedPlane" />
            </div>
            <div>
              H
              <input type="text" v-model="oneTotalHeight" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="oneSpeedHeight" />
            </div>
          </div>
        </div>
        <div class="box">
          <p>二级</p>
          <div>
            <div>
              P
              <input type="text" v-model="twoTotalPlane" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="twoSpeedPlane" />
            </div>
            <div>
              H
              <input type="text" v-model="twoTotalHeight" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="twoSpeedHeight" />
            </div>
          </div>
        </div>
        <div class="box">
          <p>三级</p>
          <div>
            <div>
              P
              <input type="text" v-model="threeTotalPlane" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="threeSpeedPlane" />
            </div>
            <div>
              H
              <input type="text" v-model="threeTotalHeight" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="threeSpeedHeight" />
            </div>
          </div>
        </div>
        <div class="box">
          <p>四级</p>
          <div>
            <div>
              P
              <input type="text" v-model="fourTotalPlane" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="fourSpeedPlane" />
            </div>
            <div>
              H
              <input type="text" v-model="fourTotalHeight" />
              <select v-model="warnCondition">
              <option value="1">and</option>
              <option value="0">or</option>
            </select>
              <input type="text" v-model="fourSpeedHeight" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <p>
          <span>起始时间</span>
          <el-date-picker
            v-model="createTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </p>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import * as serviceApi from "../../../../common/service.config";
axios.defaults.withcredentials = true;
export default {
  name: "ParameterSetting",
  props: {
    parameter: Object,
  },
  data() {
    return {
      oneTotalPlane: "0",
      oneTotalHeight: "0",
      oneSpeedPlane: "0",
      oneSpeedHeight: "0",
      twoTotalPlane: "0",
      twoTotalHeight: "0",
      twoSpeedPlane: "0",
      twoSpeedHeight: "0",
      threeTotalPlane: "0",
      threeTotalHeight: "0",
      threeSpeedPlane: "0",
      threeSpeedHeight: "0",
      fourTotalPlane: "0",
      fourTotalHeight: "0",
      fourSpeedPlane: "0",
      fourSpeedHeight: "0",
      warnCondition: "1",
      createTime:null,
    };
  },
  methods: {
    //点击确定，如果设备不存在则新增阈值，如果存在则可以修改
    async determine() {
      await axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.parameter.sensorNumber}\\",\\"moduleEnum\\":\\"${this.parameter.moduleEnum}\\",
              \\"oneTotalPlane\\":\\"${this.oneTotalPlane}\\",\\"oneTotalHeight\\":\\"${this.oneTotalHeight}\\", 
              \\"twoTotalPlane\\":\\"${this.twoTotalPlane}\\",\\"twoTotalHeight\\":\\"${this.twoTotalHeight}\\", 
              \\"threeTotalPlane\\":\\"${this.threeTotalPlane}\\",\\"threeTotalHeight\\":\\"${this.threeTotalHeight}\\", 
              \\"fourTotalPlane\\":\\"${this.fourTotalPlane}\\",\\"fourTotalHeight\\":\\"${this.fourTotalHeight}\\", 
              \\"oneSpeedPlane\\":\\"${this.oneSpeedPlane}\\",\\"oneSpeedHeight\\":\\"${this.oneSpeedHeight}\\", 
              \\"twoSpeedPlane\\":\\"${this.twoSpeedPlane}\\", \\"twoSpeedHeight\\":\\"${this.twoSpeedHeight}\\", 
              \\"threeSpeedPlane\\":\\"${this.threeSpeedPlane}\\", \\"threeSpeedHeight\\":\\"${this.threeSpeedHeight}\\", 
              \\"fourSpeedPlane\\":\\"${this.fourSpeedPlane}\\", \\"fourSpeedHeight\\":\\"${this.fourSpeedHeight}\\", 
              \\"warnCondition\\":\\"${this.warnCondition}\\"}",
              "serviceCode": "addRiskAnalysisThreshold",
              "timestamp": "",
              "uuid": ""}`,
      }).then((res) => {
        console.log(res);
        if(res.data.parameter.message = '"该传感器已设置过阈值，请勿重复添加！"'){
          axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.parameter.sensorNumber}\\",\\"moduleEnum\\":\\"${this.parameter.moduleEnum}\\",
                  \\"oneTotalPlane\\":\\"${this.oneTotalPlane}\\",\\"oneTotalHeight\\":\\"${this.oneTotalHeight}\\", 
                  \\"twoTotalPlane\\":\\"${this.twoTotalPlane}\\",\\"twoTotalHeight\\":\\"${this.twoTotalHeight}\\", 
                  \\"threeTotalPlane\\":\\"${this.threeTotalPlane}\\",\\"threeTotalHeight\\":\\"${this.threeTotalHeight}\\", 
                  \\"fourTotalPlane\\":\\"${this.fourTotalPlane}\\",\\"fourTotalHeight\\":\\"${this.fourTotalHeight}\\", 
                  \\"oneSpeedPlane\\":\\"${this.oneSpeedPlane}\\",\\"oneSpeedHeight\\":\\"${this.oneSpeedHeight}\\", 
                  \\"twoSpeedPlane\\":\\"${this.twoSpeedPlane}\\", \\"twoSpeedHeight\\":\\"${this.twoSpeedHeight}\\", 
                  \\"threeSpeedPlane\\":\\"${this.threeSpeedPlane}\\", \\"threeSpeedHeight\\":\\"${this.threeSpeedHeight}\\", 
                  \\"fourSpeedPlane\\":\\"${this.fourSpeedPlane}\\", \\"fourSpeedHeight\\":\\"${this.fourSpeedHeight}\\", 
                  \\"warnCondition\\":\\"${this.warnCondition}\\"}",
                  "serviceCode": "updateRiskAnalysisThreshold",
                  "timestamp": "",
                  "uuid": ""}`,
          }).then((res) => {
            console.log(res);
          });
        }
      });
    },
    //点击设备查询各设备的风险阈值
    async riskLnquiry(){
      await axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.parameter.sensorNumber}\\"}",
              "serviceCode": "findRiskAnalysisThreshold",
              "timestamp": "",
              "uuid": ""}`
      }).then((res) => {
        if(!res.data.message){
          this.oneTotalPlane = res.data.parameter.oneTotalPlane
          this.oneTotalHeight = res.data.parameter.oneTotalHeight
          this.oneSpeedPlane = res.data.parameter.oneSpeedPlane
          this.oneSpeedPlane = res.data.parameter.oneSpeedPlane
          this.twoTotalPlane = res.data.parameter.twoTotalPlane
          this.twoTotalHeight = res.data.parameter.twoTotalHeight
          this.twoSpeedPlane = res.data.parameter.twoSpeedPlane
          this.twoSpeedHeight = res.data.parameter.twoSpeedHeight
          this.threeTotalPlane = res.data.parameter.threeTotalPlane
          this.threeTotalHeight = res.data.parameter.threeTotalHeight
          this.threeSpeedPlane = res.data.parameter.threeSpeedPlane
          this.threeSpeedHeight = res.data.parameter.threeSpeedHeight
          this.fourTotalPlane = res.data.parameter.fourTotalPlane
          this.fourTotalHeight = res.data.parameter.fourTotalHeight
          this.fourSpeedPlane = res.data.parameter.fourSpeedPlane
          this.fourSpeedHeight = res.data.parameter.fourSpeedHeight
          this.createTime = res.data.parameter.createTime
        }
      });
    }
    
  },
  created(){
    this.riskLnquiry()
  }
};
</script>

<style lang="less" scoped>
.el-container {
  border: 1px solid grey;
  .el-aside {
    height: 86vh;
    text-align: center;
    border-right: 1px solid grey;
    div {
      font-size: 20px;
      padding: 20px;
      b {
        font-size: 16px;
      }
    }
    div:first-child {
      padding: 15px;
      border-bottom: 1px solid grey;
    }
  }
  .el-main {
    padding: 0;
    text-align: center;
    .fatherBox {
      display: flex;
      justify-content: space-between;
      .box:nth-child(1) p {
        background-color: #3a98ff;
      }
      .box:nth-child(2) p {
        background-color: #f0d80e;
      }
      .box:nth-child(3) p {
        background-color: #fc6910;
      }
      .box:nth-child(4) p {
        background-color: #fc1510;
      }
      .box {
        width: 22%;
        font-size: 20px;
        p {
          color: white;
          padding: 15px;
        }
        > div {
          margin-top: 10px;
          display: flex;
          justify-content: space-around;
          select {
            display: block;
            width: 50%;
            height: 35px;
            margin-top: 10px;
            margin-left: 29px;
            padding-left: 15px;
            font-size: 14px;
          }
          div {
            font-weight: bold;
            width: 40%;
            input {
              display: block;
              width: 50%;
              height: 30px;
              margin-top: 10px;
              margin-left: 25px;
              text-align: center;
              font-size: 14px;
            }
          }
        }
      }
    }
    .bottomBox {
      text-align: right;
      float: right;
      margin-right: 20px;
      margin-top: 30px;
      p {
        margin: 40px 0;
        span {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
